<template>
   <div class="shoplist">
        <div class="tab">
          <ul>
            <li v-for="(item,index) in nowdata" class="tab-li">
              <span v-text="item.catalogName" :class="{'select': $route.params.catalogCode == item.catalogCode }"></span>
            </li>
          </ul>
        </div>
        <div class="list-box">
            <ul>
                <li v-for="(item,index) in nownextdata">
                  <router-link :to="{name:'order',params:{cmmdtyCode:item.cmmdtyCode}}">                        <p v-text="item.price"></p>

                    <img :src="'//image2.suning.cn/uimg/cmws/catentries/'+item.cmmdtyCode+'_1_400x400.jpg'" alt="">
                      <div>
                        <p v-text="item.cmmdtyName"></p>
                      </div>
                  </router-link>
                </li>
            </ul>
        </div>
   </div>
</template>

<script>
    export default {
     data(){
      return {
        nowdata:[],
        nownextdata:{},
        shopnum:[]//货号号码
      }
     },
      created:function(){
        
         this.$http.jsonp('http://shopping-snxd.suning.com/cmwspds-web/catalog/getSameLevelCatalog/910D_'+this.$route.params.catalogCode+'_levelCatalogCallback.jsonp', {
            params: {
              _: Math.random()+10000000,
            },
            jsonp: 'callback',
            jsonpCallback: 'levelCatalogCallback'

          }).then((rep) => {

            if(rep.ok){
              let data1 = rep.data.responseObject;
              let data2 = rep.data.responseObject.catalogList
              if(data2.length>0){
                  this.nowdata = data2
                  this.getlist(this.$route.params.catalogCode,data1.retailFormatCode);//获取retailFormatCode字段的值
              }
            }

          })
      },
      methods:{
        getlist:function(num,val){
             this.$http.jsonp('http://shopping-snxd.suning.com/cmwspds-web/cmmdty/searchCmmdty.do', {
              params: {
                cityCode:1000173,
                storeCode:"910D",
                retailFormatTypes:val,
                orderBy:0,
                pageSize:10,
                pageNumber:1,
                source:"wap",
                version:3,
                catalogCode:num,
                _: Math.random()+10000000,
              },
              jsonp: 'callback',
              jsonpCallback: 'jsonp1'

            }).then((rep) => {

              if(rep.ok){
                    
                    let data1 = rep.data.resultData.oneHourUp.resultObject
                   // this.nownextdata = data1;
                   for(let i = 0; i < data1.length; i++){
                      this.shopnum.push(data1[i].cmmdtyCode);
                   }
                   this.getprice(data1);
              }

            })
        },

        getprice:function(val){
              
              this.$http.jsonp('http://shopping-snxd.suning.com/cmwspds-web/price/getCmmdtyPriceListJsonp/1000173_910D_'+this.shopnum.join(",")+'_getPro797641.do', {
              params: {
                _: Math.random()+10000000,
              },
              jsonp: 'callback',
              jsonpCallback: 'getPro797641'

            }).then((rep) => {
              if(rep.ok){
                let data1 = rep.data.resultData;
                let len = data1.length;
                 
                if(len > 0){

                  for(let i = 0; i < len; i++){
                      for(let n=0;n<val.length;n++){
                        if(val[n].cmmdtyCode == data1[i].cmmdtyCode){
                            val[n].price=data1[i].price
                        }
                      }
                  }
                 
                 this.nownextdata = val;
                 
                }

              }

            })
        } 
      },
      
    }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="less" scoped>
    .select {
      color:red
    }
    .tab {
      height: 45px;
    }
    .tab-li {
      width: 33.33%;
      float: left;
    }
</style>
